<script setup lang="ts">
import type { VxeGridProps, VxeTableInstance } from 'vxe-table'

import { useGetEnterpriseAuthLogPage, useGetEnterpriseModifyInfo } from '@fl/api/supplier'
import { SearchForm, SearchTable } from '@fl/components'
import { downloadFileWithUrl, singleFileJsonObj } from '@fl/utils/fn'
import { cloneDeep } from 'lodash-es'
import { useRouter } from 'vue-router'

const router = useRouter()

const initialState = {} as any
const state = ref(cloneDeep(initialState))

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const getEnterpriseAuthLogPageParams = computed(() => ({ page: tablePage.currentPage, size: tablePage.pageSize }))

const { data: enterpriseModifyInfoData, isLoading: isGetEnterpriseModifyInfoLoading } = useGetEnterpriseModifyInfo()
const {
    data: enterpriseAuthLogPageData,
    isLoading: isGetEnterpriseAuthLogPageLoading,
    total: enterpriseAuthLogTotal,
} = useGetEnterpriseAuthLogPage(getEnterpriseAuthLogPageParams)

// #region Form
const formRef = ref()
const isFormLoading = computed(() => isGetEnterpriseModifyInfoLoading.value)

const columns = [
    {
        colProps: {
            span: 8,
        },
        label: '认证类型',
        prop: 'enterpriseType',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '企业名称',
        prop: 'enterpriseName',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '统一信用码',
        prop: 'unifiedSocialCreditCode',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '提交时间',
        prop: 'createTime',
        valueType: 'text',
    },
    {
        colProps: {
            span: 16,
        },
        label: '状态',
        prop: 'auditStatus',
    },
]
// #endregion

// #region Table
const tableRef = ref<VxeTableInstance>()
const isTableLoading = computed(() => isGetEnterpriseAuthLogPageLoading.value)

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'createTime', title: '提交时间' },
        { field: 'createBy', title: '申请人' },
        { field: 'oldLicense', slots: { default: 'old_license' }, title: '变更前营业执照' },
        { field: 'newLicense', slots: { default: 'new_license' }, title: '营业执照' },
        { field: 'statusName', title: '审核结果' },
    ],
})

// function formatStatus({ cellValue }) {
//     return treeFindLabel({ targetValue: cellValue, treeData: AUTH_STATUS })
// }

watchEffect(() => {
    tablePage.total = enterpriseAuthLogTotal.value
})
// #endregion

// #region UI Listener
function onChangeCertificationBtnClick() {
    router.push({ path: '/supplier-pages/enterprise-management/certification/edit' })
}
// #endregion

watchEffect(() => {
    if (enterpriseModifyInfoData.value) {
        state.value = cloneDeep(enterpriseModifyInfoData.value)
    }
})
</script>

<template>
    <el-skeleton v-if="isFormLoading"
                 animated
    />

    <el-card v-else
             shadow="never"
    >
        <SearchForm ref="formRef"
                    v-model="state"
                    :columns="columns"
                    :label-width="100"
                    :row-props="{ gutter: 40 }"
                    :has-footer="false"
        >
            <template #plus-field-auditStatus>
                <span>{{ state.auditStatus }}</span>

                <el-button class="mx-20"
                           @click="onChangeCertificationBtnClick"
                >
                    更换企业认证
                </el-button>
            </template>
        </SearchForm>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="tablePage"
                     :data="enterpriseAuthLogPageData"
                     :loading="isTableLoading"
        >
            <template #old_license="{ row }">
                <span class="text-#409EFF truncate cursor-pointer"
                      @click="downloadFileWithUrl(singleFileJsonObj(row.oldLicense).url, singleFileJsonObj(row.oldLicense).name)"
                >
                    {{ singleFileJsonObj(row.oldLicense).name }}
                </span>
            </template>

            <template #new_license="{ row }">
                <span class="text-#409EFF truncate cursor-pointer"
                      @click="downloadFileWithUrl(singleFileJsonObj(row.newLicense).url, singleFileJsonObj(row.newLicense).name)"
                >
                    {{ singleFileJsonObj(row.newLicense).name }}
                </span>
            </template>
        </SearchTable>
    </el-card>
</template>
